<template>
  <!-- 问题反馈 -->
  <view id="container">
    <u-toast ref="uToast" />
    <view class="title">请选择反馈类别</view>
    <view class="content">
      <text class="txt" :class="item.checked ? 'active' : ''" @click="set_type(item.id)" v-for="(item, index) in bug_list">{{ item.labe }}</text>
    </view>
    <view class="title">请描述问题</view>
    <view class="problem">
      <textarea class="textarea" placeholder-style="color:#999" placeholder="我们会在收到反馈的第一时间回复您" v-model="content" @confirm="commit"></textarea>
      <view class="img-area">
        <view class="img-box" v-for="(item, index) in bug_img">
          <image class="del-btn" src="../../../static/facebook/sc_2.png" mode="" v-if="index != bug_img.length - 1" @click="del_img(index)"></image>
          <image class="local-img" :src="item" mode="" v-if="index != bug_img.length - 1"></image>
          <image class="note-img" :src="item" mode="" v-if="index == bug_img.length - 1" @click="choose_img" v-show="bug_img.length < 4"></image>
        </view>
      </view>
      <view class="contact">
        <view class="btn" @click="commit">确定提交</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getImageData, getFloatLocationByExif } from '../../../js_sdk/iz-exif/js_sdk/izExif/izExif.js'
export default {
  data() {
    return {
      imageValue: [],
      bug_list: [],
      bug_type: 0,
      content: '',
      bug_img: ['../../../static/people-search/sdtj1.png'],
      upload_img: []
    }
  },
  onLoad() {
    this.get_feedback_type()
  },
  methods: {
    // 获取反馈类型
    get_feedback_type() {
      let self = this
      this.$u.api.get_feedback_type().then((res) => {
        if (res.code == 200) {
          let list = []
          for (var i = 0; i < res.data.length; i++) {
            list.push({
              id: res.data[i].id,
              labe: res.data[i].labe,
              checked: false
            })
          }
          self.bug_list = list
        }
      })
    },
    // 提交
    commit() {
      let img_url = this.generate_upload_img()
      if (!this.bug_type)
        return this.$refs.uToast.show({
          title: '请选择反馈类别',
          type: 'warning'
        })
      if (!this.content)
        return this.$refs.uToast.show({
          title: '请输入反馈详情',
          type: 'warning'
        })
      this.$u.api
        .commit_feedback({
          type: this.bug_type,
          content: this.content,
          content_img: img_url
        })
        .then((res) => {
          if (res.code === 200) {
            this.$refs.uToast.show({
              title: '反馈成功',
              type: 'success'
            })
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 500)
          } else {
            this.$refs.uToast.show({
              title: '反馈失败',
              type: 'error'
            })
          }
        })
    },
    // 设置类型
    set_type(id) {
      this.bug_type = id
      for (var i = 0; i < this.bug_list.length; i++) {
        this.bug_list[i].checked = false
      }
      this.bug_list[id - 1].checked = true
    },
    // 选择图片
    choose_img() {
      let self = this;
			let countNum = 4 - self.bug_img.length;
      uni.chooseImage({
        count: countNum, //默认9
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						const imgSize = res.tempFiles[i] && res.tempFiles[i].size ? res.tempFiles[i].size : 0;
						const imgName = res.tempFiles[i] && res.tempFiles[i].name ? res.tempFiles[i].name : '';
						self.photoCompress(res.tempFiles[i], (base64Codes) => {
						  let fl = self.dataURLtoFile(base64Codes, imgName)
						})
						let local_path = res.tempFilePaths[i];
						(async () => {
						  let imginfo = await getImageData(local_path)
						  // 得到图片的方向
						  let dir = imginfo.exif.Orientation
						  let bs64 = await self.$u.utils.bug_img2base64(local_path, dir)
						  self.$u.api
						    .upload_base64({
						      chars: bs64,
						      check: 0
						    })
						    .then((res) => {
						      if (res.code != 200) {
						        self.$refs.uToast.show({
						          title: res.msg,
						          type: 'error'
						        })
						      } else {
						        self.bug_img.unshift(self.vuex_api_HEADER + res.data.path)
						        self.upload_img.unshift(res.data.path)
						      }
						    })
						})()
					}
					
        }
      })
    },
    // 删除图片
    del_img(index) {
			this.bug_img.splice(index, 1);
      this.upload_img.splice(index, 1);
    },
    // 生成上传图片
    generate_upload_img() {
      let temp = ''
      for (var i = 0; i < this.upload_img.length; i++) {
        temp = temp + ',' + this.upload_img[i]
      }
      temp = temp.slice(1)
      return temp
    },
		photoCompress(file, objDiv) {
		  // 压缩图片
		  var ready = new FileReader()
		  ready.readAsDataURL(file)
		  const _this = this
		  ready.onload = function () {
		    var fileResult = this.result
		    _this.canvasDataURL(fileResult, file.size, objDiv)
		  }
		},
		dataURLtoFile(dataurl, filename) {
		  var arr = dataurl.split(','),
		    mime = arr[0].match(/:(.*?);/)[1],
		    bstr = atob(arr[1]),
		    n = bstr.length,
		    u8arr = new Uint8Array(n)
		  while (n--) {
		    u8arr[n] = bstr.charCodeAt(n)
		  }
		  return new File([u8arr], filename, { type: mime })
		},
  }
}
</script>

<style lang="scss">
#container {
  .title {
    width: 750rpx;
    height: 84rpx;
    line-height: 84rpx;
    background: #f3f7fa;
    color: #000;
    font-size: 28rpx;
    font-weight: 700;
    padding-left: 39rpx;
  }

  .content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 750rpx;
    height: 170rpx;
    background: #fff;

    .txt {
      background: #f8f8f8;
    }

    .active {
      background: #ffb800;
    }

    text {
      width: 150rpx;
      height: 66rpx;
      line-height: 66rpx;
      background: #f8f8f8;
      font-size: 24rpx;
      text-align: center;
      border-radius: 6rpx;
    }
  }

  .problem {
    background: #fff;
    width: 100%;
    padding: 52rpx 40rpx;

    .img-area {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      height: auto;
      // border: 1rpx solid #007AFF;

      .img-box {
        width: 138rpx;
        height: 138rpx;
        position: relative;
        // border: 1rpx solid #000000;
        margin-right: 10rpx;

        .del-btn {
          width: 40rpx;
          height: 40rpx;
          border: 1px solid red;
          position: absolute;
          z-index: 10;
          top: -15rpx;
          right: 5rpx;
          border: 1px solid transparent;
        }

        .local-img {
          width: 130rpx;
          height: 130rpx;
          // border: 1px solid #0BB20C;
        }

        .note-img {
          width: 130rpx;
          height: 130rpx;
          // border: 1px solid blue;
        }
      }
    }
  }

  .contact {
    padding: 52rpx 40rpx;

    .btn {
      width: 432rpx;
      height: 86rpx;
      line-height: 86rpx;
      color: #fff;
      background: linear-gradient(90deg, #6ae4e9 0%, #4fc1db 100%);
      box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(51, 145, 255, 0.2);
      border-radius: 43rpx;
      text-align: center;
      margin: 0 auto;
      margin-top: 50rpx;
    }
  }
}
</style>
